<template>
  <div class="myNav">
      <div class="card">
        <div class="top">
          <h1>마이페이지</h1>
          <router-link :class="['btnNotice', num>0&&'has']" to="/my/notice"></router-link>
        </div>        
        <div class="info">
          <template v-if="role=='personal'">
            <div class="avatar" @click="showAvatarEdit">
              <img :src="userInfo&&userInfo.uthumb?userInfo.uthumb:defaultAvatar" :key="userInfo&&userInfo.uthumb" :onerror="errorAvatar">
            </div>
            <div class="name">
              <b>{{userInfo&&userInfo.name}} 님</b><span v-if="userInfo&&userInfo.company">({{userInfo.company}})</span>
            </div>
          </template>
          <template v-else>
            <div class="avatar" @click="showAvatarEdit">
              <img :src="userInfo&&userInfo.uthumb?userInfo.uthumb:defaultAvatar3" :key="userInfo&&userInfo.uthumb" :onerror="errorAvatar4">
            </div>
            <div class="name">
              <b v-if="userInfo&&userInfo.company">{{userInfo.company}}</b><span v-if="userInfo&&userInfo.email">({{userInfo.email}})</span>
            </div>
          </template>
          <dl class="menu" v-if="role=='personal'">
            <dt>주요관리</dt>
            <dd><router-link to="/my/cv">이력서 관리</router-link></dd>
            <dd><router-link to="/my/coach">코칭서비스 관리</router-link></dd>
          </dl>
          <dl class="menu" v-else>
            <dt>주요관리</dt>
            <dd><router-link to="/my/job">채용정보 관리</router-link></dd>
          </dl>
        </div>
      </div>
      <div class="nav">
        <dl class="menu" v-if="role=='personal'">
          <dt>회원정보</dt>
          <a href="javascript:;" target="_self" @click="checkLoginType('/my/check')">개인정보관리</a>
          <dt>서비스 이용내역</dt>
          <dd><router-link to="/my/cv">이력서 관리</router-link></dd>
          <dd><router-link to="/my/follow">나의 이력서 조회 기업</router-link></dd>
          <dd><router-link to="/my/coach">코칭서비스 관리</router-link></dd>
          <dd><router-link to="/my/favorite">최근/찜 채용공고</router-link></dd>
          <dd><router-link to="/my/order">주문/결제 내역</router-link></dd>
        </dl>
        <dl class="menu" v-else>
          <dt>회원정보</dt>
          <a href="javascript:;" target="_self" @click="checkLoginType('/my/check')">기업정보관리</a>
          <dt>서비스 이용내역</dt>
          <dd><router-link to="/my/job">채용정보 관리</router-link></dd>
          <dd><router-link to="/my/favoriteEn">최근/찜 인재정보</router-link></dd>
          <dd><router-link to="/my/followEn">나의 채용정보 조회 회원</router-link></dd>
        </dl>
      </div>
      <avatar-edit></avatar-edit>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { newNoticeCount } from '@/api'
import avatarEdit from '@/components/avatarEdit'

export default {
  name:'userCenterNav',
  components:{avatarEdit},
  props:[],
  data(){
    return {
      num:0
    }
  },
  props:[],
  computed:{
    ...mapState(['userInfo','role','errorAvatar','defaultAvatar','defaultAvatar3','errorAvatar4']),
  },
  created(){
    this.newNoticeCount()
  },
  mounted(){},
  methods:{
    ...mapActions(['setShowAvatarEdit']),
    showAvatarEdit(){
      this.setShowAvatarEdit(true)
    },
    async newNoticeCount(){
      let res = await newNoticeCount();
        if (res.code == 200) {
          this.num=res.data.num;
        }
    },
    checkLoginType(path){
      if(this.userInfo&&this.userInfo.login_type==1){
        if(this.userInfo.member_type==2){
          this.$router.replace('/my/enterprise')
        }else{
          this.$router.replace('/my/personal')
        }
      }else{
        this.$router.push(path)
      }
    }
  },
  watch:{}
}
</script>
<style lang="scss" scoped>
 @import "@/assets/styles/myNav.scss";
</style>